<template>
    <div id="content">
        <!-- 左 -->
        <div class="box-left">
            <!-- 车位 -->
            <div id="panel" class="contain-place">
                <div id="placeControl" style="display: flex; padding-top: 12px; padding-left: 10px;">
                    <!-- 车位概况 -->
                    <div id="view-select-0" class="left-radius-7" v-on:click="selectPlace(0)">车位概况</div>
                    <!-- 设备概况 -->
                    <div id="view-unselect-0" class="right-radius-7" v-on:click="selectPlace(1)">设备概况</div>
                </div>
                <div id="chart-parking-place"></div>
            </div>

            <!-- 停车动态 -->
            <div style="height: 8px;"/>
            <div id="panel" style="width: 100%; height: 327px;">
                <!-- 头部 -->
                <div id="flex-between" style="padding-top: 20px;">
                    <!-- 停车动态 -->
                    <div id="panel-title" style="margin-left: 24px;">停车动态</div>
                    <!-- 下拉框 :trigger="['click']" -->
                    <a-dropdown style="margin-right: 30px;" placement="bottomCenter">
                        <div style="display: flex; align-items: center;">
                            <span id="panel-span-15">{{parkingDyncmicsPlace[parkingDynamicsIndex].parkingArea}}</span>
                            <div id="icon-down-0" style="margin-left: 14px;"/>
                        </div>
                        <a-menu slot="overlay">
                            <a-menu-item
                                    v-for="(place, index) in parkingDyncmicsPlace"
                                    v-on:click="selectParkingDynamics(index)"
                                    v-bind:key="place.parkingArea"
                            >{{place.parkingArea}}
                            </a-menu-item>
                        </a-menu>
                    </a-dropdown>
                </div>
                <!-- chart -->
                <div id="chart-parking-dynamics"/>
            </div>

            <!-- 在岗 -->
            <div style="height: 8px;"/>
            <div id="panel" style="width: 100%; height: 260px;">
                <!-- 标题 -->
                <div id="panel-title" style="margin-left: 24px; padding-top: 20px;">人员在岗情况</div>
                <!-- 容器 -->
                <div id="charts-condition" style="width: 100%; height: 196px;"></div>
            </div>
        </div>
        <!-- 中 -->
        <div class="box-center">
            <div id="panel" style="width: 100%; height: 383px;">
                <div id="flex-between" style=" padding-top: 11px;">
                    <!-- 停车区统计 -->
                    <div id="panel-title" style="margin-left: 24px;">停车区统计</div>
                    <!-- 选项 -->
                    <div id="tableControl" style="display: flex; margin-right: 8px;">
                        <div id="view-select-0" class="left-radius-7" v-on:click="selectStatisticsTable(0)">当日统计</div>
                        <div id="view-unselect-0" v-on:click="selectStatisticsTable(1)">当月统计</div>
                        <div
                                id="view-unselect-0"
                                class="right-radius-7"
                                v-on:click="selectStatisticsTable(2)"
                        >当年统计
                        </div>
                    </div>
                </div>
                <!-- 表单 -->
                <div style="height: 21px;"/>
                <div id="table-statistics" class="table-statistics">
                    <table>
                        <tr>
                            <th>停车区</th>
                            <th>停车点数</th>
                            <th>车位总数</th>
                            <th>实收金额</th>
                            <th>应收金额</th>
                        </tr>
                    </table>
                </div>
            </div>
            <div id="panel" style="width: 100%; height: 499px; margin-top: 8px;">
                <!-- 标题 -->
                <div  style="display: flex; align-items: center; justify-content: space-between; padding-top: 11px;">
                    <!-- 营收统计 -->
                    <div id="panel-title" style="margin-left: 24px;">营收统计</div>
                    <!-- 选项 -->
                    <div id="revenueControl" style="display: flex; margin-right: 8px;">
                        <!-- 车位概况 -->
                        <div id="view-select-0" class="left-radius-7" v-on:click="selectRevenueTable(0)">当日营收</div>
                        <!-- 设备概况 -->
                        <div id="view-unselect-0" v-on:click="selectRevenueTable(1)">当月营收</div>
                        <!-- 设备概况 -->
                        <div id="view-unselect-0" class="right-radius-7" v-on:click="selectRevenueTable(2)">当年营收</div>
                    </div>
                </div>
                <!-- 营收图例 -->
                <div id="panel-inpanel" class="legend-revenue">
                    <!-- 营收 -->
                    <div class="item-legend-revenue">
                        <div class="span-round-rect" id="color-line-0"/>
                        <span id="panel-inpanel-span">应收: x元</span>
                        <span id="panel-inpanel-span-hint" style="margin-left: 10px;">(x笔)</span>
                    </div>

                    <div class="item-legend-revenue">
                        <div class="span-round-rect" id="color-line-1"/>
                        <span id="panel-inpanel-span">实收: x元</span>
                        <span id="panel-inpanel-span-hint" style="margin-left: 10px;">(x笔)</span>
                    </div>

                    <div class="item-legend-revenue" style="margin-left: 0;">
                        <span id="panel-inpanel-span">未收: x元</span>
                        <span id="panel-inpanel-span-hint" style="margin-left: 10px;">(x笔)</span>
                    </div>
                </div>
                <!-- 营收图表-->
                <div id="chart-revenue">

                </div>
            </div>
        </div>
        <!-- 右 -->
        <div class="box-right">
            <!-- 停车时长分布 -->
            <div id="panel" style="width: 100%; height: 450px;">
                <!-- 标题 -->
                <div id="flex-between" style="width: 100%;  padding-top: 20px;">
                    <div id="panel-title" style="margin-left: 24px;">停车时长分布</div>
                    <div id="icon-setting" style="margin-right: 20px; cursor: pointer;" @click="settingTap"/>
                    <a-modal title="停车时长分布" centered v-model="modalVisible" @ok="okey">
                        <div class="components-input-demo-size" v-for="(item,index) in parkingTimeItemList" :key="item.name" >
                            名称:
                            <a-input placeholder="名称" v-model="item.name"/>
                            区间:
                            <a-time-picker format="HH:mm" v-model="item.timeStart"/>
                            <a-time-picker format="HH:mm" v-model="item.timeEnd"/>
                            <a-button icon="delete" type="danger" @click="removeItem(index)">移除</a-button>
                        </div>
                        <div class="btnBox">
                            <a-button icon="plus-circle" @click="addOption" size="large" type="primary">添加</a-button>
                        </div>
                    </a-modal>
                </div>
                <!-- 图表 -->
                <div id="chart-parking-time"></div>
            </div>
            <!-- 诉求管理 -->
            <div id="panel" style="width: 100%; height: 431px; margin-top: 8px;">
                <!-- 标题 -->
                <div
                        style="display: flex; align-items: center; justify-content: space-between; padding-top: 20px;"
                >
                    <div id="panel-title" style="margin-left: 24px;">诉求管理</div>
                </div>
                <!-- 图表 -->
                <div id="chart-appeal"></div>
                <!-- 分割线 -->
                <div id="panel-divide-0" style="height: 1px; margin-left: 30px; margin-right: 30px;"/>
                <!-- 诉求管理 -->
                <!--                <div style="padding-left: 31px; padding-top: 10px;">-->
                <!--                    <div-->
                <!--                            id="panel-span-15"-->
                <!--                            style="margin-top: 10px; cursor: pointer;"-->
                <!--                            v-for="appealInfo in appealInfoList"-->
                <!--                            v-on:click="appealTap"-->
                <!--                    >{{appealInfo.name}}-->
                <!--                    </div>-->
                <!--                </div>-->
            </div>
        </div>
    </div>
</template>

<script>
    /* --------------------- echarts --------------------- */
    import echarts from "echarts";
    import common from "../store/common";
    import EChartsUtils from "../utils/EChartUtils";
    import EChartUtils from "../utils/EChartUtils";
    import {mapGetters} from 'vuex'
    /* --------------------- 主题切换 -------------------- */
    import ThemeObservable from "../observable/ThemeObservable";
    import mainApi from '../api/MainApi';
    import moment from 'moment';
    import CommonUtils from '../utils/CommonUtils';

    export default {
        name: "Main",
        data() {
            return {
                /* --------------------- 左 -------------------- */
                parkingPlaceIndex: 0,
                parkingPlaceChart: undefined,
                parkingDynamicsIndex: 0,
                parkingDyncmicsPlace: [
                    {name: "停车区A", dataList: [{}, {}]},
                    {name: "停车区B", dataList: [{}, {}]},
                    {name: "停车区C", dataList: [{}, {}]},
                    {name: "停车区D", dataList: [{}, {}]},
                    {name: "停车区E", dataList: [{}, {}]},
                    {name: "停车区F", dataList: [{}, {}]},
                    {name: "停车区G", dataList: [{}, {}]},
                    {name: "停车区H", dataList: [{}, {}]},
                    {name: "停车区I", dataList: [{}, {}]},
                    {name: "停车区J", dataList: [{}, {}]},
                    {name: "停车区K", dataList: [{}, {}]}
                ],
                parkingDynamicsChart: undefined,

                conditionPersonList: [
                    {name: "到岗人数", value: 0},
                    {name: "缺岗人数", value: 0}
                ],
                conditionChart: undefined,
                /* --------------------- 中 ------------------ */
                staticsticsTableIndex: 0,

                revenueIndex: 0,
                revenueDayList: [],
                revenueChart: undefined,
                /* --------------------- 右 --------------------- */
                parkingTimeList: [
                    {name: "0.5小时以下", value: 10},
                    {name: "0.5-1小时", value: 20},
                    {name: "1-2小时", value: 8},
                    {name: "2-4小时", value: 14},
                    {name: "4小时以上", value: 18}
                ],
                parkingTimeChart: undefined,

                appealList: [
                    {name: "已处理", value: 95},
                    {name: "未处理", value: 27}
                ],
                appealInfoList: [
                    // {name: "2019-06-18 14:05:05 章泽天用户发出诉求"}
                ],
                appealChart: undefined,
                modalVisible: false,
                parkingTimeItemList: [],
                parkingTimeItem: {
                    id: "",
                    name: "",
                    timeStart: null,
                    timeEnd: null
                },
                // timeData:[{name:'输入名称',start:null,end:'HH:mm'}],
                // timeStart:[],
                // item:{name:'输入名称',start:null,end:'HH:mm'}
            };
        },
        methods: {
            /* **************** 车位图[ok] **************** */
            selectPlace(index) {
                let placeControl = document.querySelector("#placeControl") || {};
                let children = placeControl.children;
                let len = children ? children.length : 0; 
                for (let i = 0; i < len; i++) {
                    children[i].id = index == i ? "view-select-0" : "view-unselect-0";
                }

                this.parkingPlaceIndex = index;
                this.getTruckSpaceSurvey(index);
            },

            drawParkingPlace(dataList, title, count) {
                if (this.parkingPlaceChart) this.parkingPlaceChart.dispose();
                let len = dataList ? dataList.length : 0;
                if (len == 0) return;
                this.parkingPlaceChart = echarts.init(
                    document.getElementById("chart-parking-place"),
                    common.getTheme()
                );
                // 绘制图表
                this.parkingPlaceChart.setOption({
                    graphic: this.createTextGraphic(235, "center", `${title}\n\n${count}`),
                    /* ---------------- 提示文本 ----------- */
                    tooltip: {
                        trigger: "item",
                        formatter: "{b}: {c} ({d}%)"
                    },
                    /* ----------------- 图例 --------------- */
                    legend: EChartUtils.createLegend({
                        orient: "vertical",
                        top: "middle",
                        left: 22,
                        data: dataList,
                        formatter: name => {
                            let array = dataList;
                            let len = array ? array.length : 0;
                            let value = 0;
                            for (let i = 0; i < len; i++) {
                                if (array[i].name == name) value = array[i].value;
                            }
                            return name + "  " + value;
                        }
                    }),
                    /* --------------- 图内容 ----------------- */
                    series: [
                        {
                            startAngle: 120,
                            center: ["260", "50%"],
                            type: "pie",
                            radius: ["40%", "70%"],
                            data: dataList,
                            label: {show: true, formatter: "{d}%"},
                            labelLine: {smooth: true}
                        }
                    ]
                });
            },

            /* -------- 停车动态 -------- */
            initParkingDynamicsData() {
                this.getParkingTrends();
            },
            selectParkingDynamics(index) {
                this.parkingDynamicsIndex = index;
                let dataList = this.parkingDyncmicsPlace[index].list;
                this.drawParkingDynamics(dataList);
            },
            //停车动态
            drawParkingDynamics(dataList) {
                if (this.parkingDynamicsChart) this.parkingDynamicsChart.dispose();
                let xAxisData = [],
                    shouldMoneyData = [],
                    truckSpaceRateData = [],
                    returnData = dataList;
                
                for (let i = 0; i < returnData.length; i++) {
                    xAxisData.push(i + "时");
                    shouldMoneyData.push(returnData[i].shouldMoney/100);
                    truckSpaceRateData.push(`${(returnData[i].truckSpaceRate * 100).toFixed(2)}`)
                }

                this.parkingDynamicsChart = echarts.init(
                    document.getElementById("chart-parking-dynamics"),
                    common.getTheme()
                );

                this.parkingDynamicsChart.setOption({
                    grid: {
                        left: "5%",
                        right: "5%",
                        bottom: "0%",
                        top: 70,
                        containLabel: true
                    },
                    legend: EChartUtils.createLegend({
                        data: ["车位置换率（%）", "应收账单（元）"],
                        left: 22,
                        top: 15,
                        itemGap: 39
                    }),
                    tooltip: {trigger: "axis"},
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: xAxisData
                    },
                    yAxis: {type: "value"},
                    series: [
                        {
                            name: "车位置换率（%）",
                            type: "line",
                            areaStyle: {opacity: 0.1},
                            data: truckSpaceRateData
                        },
                        {
                            name: "应收账单（元）",
                            type: "line",
                            areaStyle: {opacity: 0.1},
                            data: shouldMoneyData
                        }
                    ]
                });
            },

            /* ---- 人员在岗情况[ok] ----- */
            initPersonConditioData() {
							this.staffOnDutySituation();
            },

            drawPersonCondition(dataList, count) {
                if (this.conditionChart) this.conditionChart.dispose();
                this.conditionPersonList = dataList;

                let len = dataList ? dataList.length : 0;
                if (len == 0) return;

                this.conditionChart = echarts.init(
                    document.getElementById("charts-condition"),
                    common.getTheme()
                );

                // 绘制图表
                this.conditionChart.setOption({
                    graphic: this.createTextGraphic(236, "center", `总人数\n\n${count}`),
                    /* ---------------- 提示文本 ----------- */
                    tooltip: {trigger: "item", formatter: "{b}: {c} ({d}%)"},
                    /* ----------------- 图例 --------------- */
                    legend: EChartUtils.createLegend({
                        left: 22,
                        orient: "vertical",
                        top: "middle",
                        data: dataList,
                        formatter: name => {
                            let array = dataList;
                           
                            let len = array ? array.length : 0;
                            let value = 0;
                            for (let i = 0; i < len; i++) {
                                if (array[i].name == name) value = array[i].value;
                            }
                            return name + "  " + value;
                        }
                    }),
                    /* --------------- 图内容 ----------------- */
                    series: [
                        {
                            startAngle:120,
                            center: ["260", "50%"],
                            name: "访问来源",
                            type: "pie",
                            radius: ["40%", "70%"],
                            data: dataList,
                            label: {show: true, formatter: "{d}%"},
                            labelLine: {smooth: true}
                        }
                    ]
                });
            },

            /* ************* 停车区表单[OK] **************** */
            selectStatisticsTable(staticsticsTableIndex) {
                /* ------------------------- UI --------------------------- */
                let placeControl = document.querySelector("#tableControl") || {};
                let children = placeControl.children;
             
                let len = children ? children.length : 0;
                for (let i = 0; i < len; i++) {
                    children[i].id =
                        staticsticsTableIndex == i ? "view-select-0" : "view-unselect-0";
                }
                /* ------------------------- 数据 -------------------------- */
                this.parkingAreaDataStatistics(staticsticsTableIndex);
            },

            drawPlaceTable(dataList) {
                let control = document.querySelector("#table-statistics");
                let len;
                let table = control.children[0],
                    children = table.children;
                    if (children !=  null && children != undefined) {
                         len = children.length;
                    }
                   
                while (len > 1) {
                    table.deleteRow(1);
                    len -= 1;
                }
                /* ------------------ 数据绘制 ---------------- */
                let dl = dataList ? dataList.length : 0;
                for (let i = 0; i < dl; i++) {
                    let item = dataList[i];
                    let row = table.insertRow();

                    let cell = row.insertCell();
                    cell.innerText = item.parkingArea;
                    cell = row.insertCell();
                    cell.innerText = item.parkCount + '个';
                    cell = row.insertCell();
                    cell.innerText = item.truckSpaceNum + '个';
                    cell = row.insertCell();
                    cell.innerText = item.sumRealityMoney / 100 + '元';
                    cell = row.insertCell();
                    cell.innerText = item.sumShouldMoney / 100 + '元';
                }
            },

            /* -- 营收统计 自己转换 ------ */
            selectRevenueTable(index) {
                let placeControl = document.querySelector("#revenueControl") || {};
                let children = placeControl.children;
                let len = children ? children.length : 0;
                for (let i = 0; i < len; i++) {
					children[i].id = index == i ? "view-select-0" : "view-unselect-0";
                }
                this.revenueIndex = index;
                /* ------------------ 从index取list */
                this.chargeStatistics(index);
            },

            // drawRevenue(dataList, xAxisData) {
            drawRevenue(dataList) {
                if (this.revenueChart) this.revenueChart.dispose();
                let view = document.querySelector(".legend-revenue");

                /* ------------------------- 数据处理 ---------------------- */

                let xAxisData = [],
                    dataShould = [],
                    dataShouldButNot = [],
                    listData = [];
                let dateType = dataList.dateType;
                switch (dateType) {
                    case "1":
                        listData = dataList.dayModelList;
                        for (let i = 0; i < listData.length; i++) {
                            xAxisData.push(i + "时");
                            dataShould.push(listData[i].hour / 100);
                            dataShouldButNot.push(listData[i].hour2 / 100);
                        }
                        break;
                    case "2":
                        listData = dataList.monthModelList;
                        for (let i = 0; i < listData.length; i++) {
                            xAxisData.push(i + 1 + "号");
                            dataShould.push(listData[i].day / 100);
                            dataShouldButNot.push(listData[i].day2 / 100);
                        }
                        break;
                    case "3":

                        listData = dataList.yearModelList;
                        for (let i = 0; i < listData.length; i++) {
                            xAxisData.push(i + 1 + "月");
                            dataShould.push(listData[i].month / 100);
                            dataShouldButNot.push(listData[i].month2 / 100);
                        }
                        break;
                    default:
                        break;
                }


                /* ------------------------- 图例 ------------------------- */
                view.style = "display: flex"; // 显示
                let children = view.querySelectorAll(".item-legend-revenue");
                // 应收
                this.setInpanelSpan(children[0], `应收: ${dataList.sumShouldMoney}元`);
                this.setInpanelSpanHint(children[0], `(${dataList.countShould}笔)`);

                // 实收
                this.setInpanelSpan(children[1], `实收: ${dataList.sumRealityMoney}元`);
                this.setInpanelSpanHint(children[1], `(${dataList.countReality}笔)`);

                // 未收
                this.setInpanelSpan(children[2], `未收: ${dataList.sumShouldButNotMoney}元`);
                this.setInpanelSpanHint(children[2], `(${dataList.countShoutButNot}笔)`);

                /* ------------------------- 图 --------------------------- */
                let dom = document.getElementById("chart-revenue");
                this.revenueChart = echarts.init(dom, common.getTheme());

                this.revenueChart.setOption({
                    grid: {
                        left: "2%",
                        right: "2%",
                        bottom: "0%",
                        top: "2%",
                        containLabel: true
                    },
                    tooltip: {trigger: "axis"},
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: xAxisData
                    },
                    yAxis: {type: "value"},
                    series: [
                        {
                            name: "应收",
                            type: "line",
                            areaStyle: {opacity: 0.1},
                            data: dataShould,
                            smooth: true
                        },
                        {
                            name: "实收",
                            type: "line",
                            areaStyle: {opacity: 0.1},
                            data: dataShouldButNot,
                            smooth: true
                        }
                    ]
                });
            },

            /* ************* 停车时长分布 [ ok ] ************* */
            drawParkingTime(dataList, count) {
                if (this.parkingTimeChart) this.parkingTimeChart.dispose();

                this.parkingTimeList = dataList;

                this.parkingTimeChart = echarts.init(
                    document.getElementById("chart-parking-time"),
                    common.getTheme()
                );

                // 绘制图表
                this.parkingTimeChart.setOption({
                    graphic: this.createTextGraphic("center", 152, `总停车\n\n${count}次`),
                    /* ---------------- 提示文本 ----------- */
                    tooltip: {
                        trigger: "item",
                        formatter: "{b}: {c} ({d}%)"
                    },
                    /* ----------------- 图例 --------------- */
                    legend: EChartUtils.createLegend({
                        left: 37,
                        right: 37,
                        bottom: 0,
                        data: dataList
                    }),
                    /* --------------- 图内容 ----------------- */
                    series: [
                        {
                            roseType: "radius",
                            center: ["50%", "45%"],
                            type: "pie",
                            radius: ["25%", "50%"],
                            data: dataList,
                            label: {show: true, formatter: "{d}%\n\n{c}次"},
                            labelLine: {smooth: true}
                        }
                    ]
                });
            },

            settingTap() {
                this.modalVisible = true;
                this.initParkingTimeItemList();//停车时长配置项
            },
            okey() {
                this.modalVisible = false;
                //保存停车时长配置项
                let map = this.parkingTimeItemList.map(x => {
                    let parkingTimeItem = {
                        id:"",
                        name: "",
                        timeStart: null,
                        timeEnd: null
                    };
                    let timeStartTimestamp = CommonUtils.hourAndMinuteMomentConvertToTimestamp(x.timeStart.format("HH:mm"));
                    let timeEndTimestamp = CommonUtils.hourAndMinuteMomentConvertToTimestamp(x.timeEnd.format("HH:mm"));

                    parkingTimeItem.name = x.name;
                    parkingTimeItem.timeStart = timeStartTimestamp;
                    parkingTimeItem.timeEnd = timeEndTimestamp;

                    return parkingTimeItem;
                });
                let condition={list: map};
                condition = JSON.stringify(condition);
                mainApi.saveParkingTimeSetting(condition).then(()=>{

                    this.$message.success("保存成功！");
                    this.parkingTimeStatistics();
                }).catch(err=>{
                    console.error("保存停车时长配置数据异常！", err);
                });

            },
            moment,
            addOption() {
                let item = this.parkingTimeItem;
                this.parkingTimeItemList.push({...item})
            },
            removeItem(index) {
                this.parkingTimeItemList.splice(index, 1);
            },
            onChange(time, timeString) {
            },
            /* --- 诉求管理 [ ok ] ------- */
            initAppeal() {
                this.complainStatistics();
            },
            drawAppeal(dataList, count) {
                if (this.appealChart) this.appealChart.dispose();

                this.appealList = dataList;

                this.appealChart = echarts.init(
                    document.getElementById("chart-appeal"),
                    common.getTheme()
                );

                // 绘制图表
                this.appealChart.setOption({
                    /* ----------------- 自定义文本 ---------- */
                    graphic: this.createTextGraphic(233, "center", `总诉求\n\n${count}次`),
                    /* ----------------- 图例 --------------- */
                    legend: EChartUtils.createLegend({
                        left: 37,
                        top: "center",
                        orient: "vertical",
                        data: dataList,
                        formatter: function (name) {
                            let array = dataList;

                            let len = array ? array.length : 0;
                            let value = 0;
                            for (let i = 0; i < len; i++) {
                                if (array[i].name == name) value = array[i].value;
                            }
                            return name + "  " + value;
                        }
                    }),
                    /* ---------------- 提示文本 ----------- */
                    tooltip: {trigger: "item", formatter: "{b}: {c} ({d}%)"},
                    /* --------------- 图内容 ----------------- */
                    series: [
                        {
                            startAngle:160,
                            center: ["260", "50%"],
                            type: "pie",
                            radius: ["50%", "80%"],
                            data: dataList,
                            label: {show: true, formatter: "{d}%"},
                            labelLine: {smooth: true}
                        }
                    ]
                });
            },
            appealTap() {
                alert("诉求被点击");
            },
            /**************************数据获取****************************/
            /*---------左---------*/
            /*车位/设备概况*/
            getTruckSpaceSurvey(index) {
                let condition = undefined;
                mainApi.getTruckSpaceSurvey(condition).then(data => {
                    let returnData = data.data;
                    let dataList = [];
                    if (index == 0) {
                        dataList = [
                            {name: "空闲位", value: returnData.free},
                            {name: "已占用", value: returnData.inUse}
                        ];
                        this.drawParkingPlace(dataList, "已运营", returnData.alreadyOperated);
                    } else if (index == 1) {
                        dataList = [
                            {name: "已部署", value: returnData.deployed},
                            {name: "未部署", value: returnData.notDeploy}
                        ];
                        this.drawParkingPlace(dataList, "总车位", returnData.totalTruckSpace);
                    }
                }).catch(err => {
                    console.error("获取车位/设备概况数据异常！", err);
                })
            },
            /*停车动态*/
            getParkingTrends() {
                let condition = undefined;
                mainApi.getParkingTrends(condition).then(data => {
                    let returnData = data.data;
                    this.parkingDyncmicsPlace = returnData;
                    this.selectParkingDynamics(0);
                }).catch(err => {
                    console.error("获取停车动态数据异常！", err);
                })
            },
            /*人员在岗情况*/
            staffOnDutySituation() {
                let condition = undefined;
                mainApi.staffOnDutySituation(condition).then(data => {
                    let returnData = data.data;
                    let dataList = [
                        {name: "到岗人数", value: returnData.onDutyCount},
                        {name: "缺岗人数", value: returnData.lackDutyCount}
                    ];
                    let count = returnData.allStaffCount;
                    this.drawPersonCondition(dataList, count);
                }).catch(err => {
                    console.error("获取人员在岗情况数据异常！", err);
                })
            },
            /*---------中---------*/
            /*停车区统计*/
            parkingAreaDataStatistics(dateType) {
                let condition = {};
                //前端0：日 1：月 2：年
                //后端1：日 2：月 3：年
                condition.dateType = dateType + 1;
                mainApi.parkingAreaDataStatistics(condition).then(data => {
                    if(data.data != null){
                        let returnData = data.data;
                        this.drawPlaceTable(returnData);
                    }
                })
                // .catch(err => {
                //     console.error("获取停车区统计数据异常！", err);
                // })
            },
            /*营收统计*/
            chargeStatistics(dateType) {
                let condition = {};
                //前端0：日 1：月 2：年
                //后端1：日 2：月 3：年
                condition.dateType = dateType + 1;
                mainApi.chargeStatistics(condition).then(data => {
                    if(data.data != null){
                        let returnData = data.data;
                        this.drawRevenue(returnData);
                    }
                })
                // .catch(err => {
                //     console.error("获取营收统计数据异常！", err);
                // })
            },
            /*---------右边---------*/
            /*停车时长分布*/
            parkingTimeStatistics() {

                let condition = undefined;
                mainApi.parkingTimeStatistics(condition).then(data => {
                    let returnData = data.data;
                    let dataList = returnData.list.map(x => {
                        return {name: x.name, value: x.parkingCount};
                    });
                    let count = returnData.parkingAllCount;
                    this.drawParkingTime(dataList, count);
                }).catch(err => {
                    console.error("获取停车时长分布数据异常！", err);
                })
            },
            initParkingTimeItemList() {
                mainApi.findAllParkingTimeSetting().then(data => {
                    let returnData = data.data;
                    let map = returnData.map(x => {
                        let timeStart = x.timeStart;
                        let timeEnd = x.timeEnd;
                        let hourAndMinuteStart = CommonUtils.timestampConvertToHourAndMinute(timeStart);
                        let hourAndMinuteEnd = CommonUtils.timestampConvertToHourAndMinute(timeEnd);
                        x.timeStart = moment(hourAndMinuteStart, 'HH:mm');
                        x.timeEnd = moment(hourAndMinuteEnd, 'HH:mm');
                        return x;
                    });
                    this.parkingTimeItemList = map;
                })
            },

            /*诉求管理*/
            complainStatistics() {
                let condition = undefined;
                mainApi.complainStatistics(condition).then(data => {
                    let returnData = data.data;
                    let dataList = [
                        {name: "已处理", value: returnData.countProcessed},
                        {name: "未处理", value: returnData.countUntreated}
                    ],
                    count = returnData.allCountComplain;
                    this.drawAppeal(dataList, count);
                }).catch(err => {
                    console.error("获取诉求管理数据异常！", err);
                })
            },


            /* **************** 辅助类 *********************** */
            createTextGraphic(left, top, text) {
				return EChartsUtils.createTextGraphic(left, top, text);
            },

            setInpanelSpan(parent, text) {
							parent.querySelector("#panel-inpanel-span").innerHTML = text;
            },

            setInpanelSpanHint(parent, text) {
							parent.querySelector("#panel-inpanel-span-hint").innerHTML = text;
            },

            /* **************** 主题切换的时候 **************** */
            themeSwitchListener() {
							this.selectPlace(this.parkingPlaceIndex);
							this.initParkingDynamicsData();//停车动态
							this.initPersonConditioData(); // 人员在岗情况

							this.selectRevenueTable(this.revenueIndex); // 营收统计
							this.parkingTimeStatistics();//停车时长分布
							this.initAppeal();//诉求管理
            }
        },

        mounted() {
					this.$store.dispatch('showHead');// 显示头部
					this.selectPlace(this.parkingPlaceIndex);
					this.initParkingDynamicsData();//停车动态
					this.initPersonConditioData();//人员在岗情况
					this.selectStatisticsTable(0);
					this.selectRevenueTable(this.revenueIndex); // 营收统计
					this.parkingTimeStatistics();//停车时长分布
					this.initAppeal();// 诉求管理

					ThemeObservable.addThemeSwitchListener(this.themeSwitchListener);
        },

        created() {
					/* -------------- 注册主题 ------------------- */
					let chartTheme = require("../theme/chart");
					chartTheme.registerLightTheme(echarts);
					chartTheme.registerDarkTheme(echarts);
        },

        destroyed() {
            ThemeObservable.removeThemeSwitchListener(this.themeSwitchListener);
        },

        computed: {
            ...mapGetters(['setUserName']),
        },
        watch: {
					$route(to) {
							if (to.name == 'book' || to.name == 'my') {
								this.$store.dispatch('footerStatus/showFooter') //这里改为'footerStatus/showFooter',
							} else {
								this.$store.dispatch('footerStatus/hideFooter') //同上注释
							}
					}
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    #content {
        margin-top: 8px;
        width: 100%;
        padding-bottom: 20px;
        display: flex;
    }

    #flex-between {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* box-left */
    .box-left {
        width: 425px;
        height: 100%;
        margin-left: 23px;
        min-width: 425px;
    }

    /* box-center */
    .box-center {
        width: 990px;
        height: 100%;
        margin-left: 8px;
        margin-right: 8px;
        min-width: 990px;
    }

    /* box-right */
    .box-right {
        width: 425px;
        height: 100%;
        margin-right: 23px;
        min-width: 425px;
    }

    /* 车位信息*/
    .contain-place {
        width: 100%;
        height: 289px;
    }

    /* table */
    .table-statistics {
        margin-left: 17px;
        margin-right: 17px;
    }

    .dropdown-menu {
        min-width: 100px;
        max-height: 200px;
        overflow-y: auto;
        border-radius: 7px;
        box-shadow: 0px 0px 10px 0px rgba(140, 124, 255, 1);
    }

    .menu-item {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 左图标 */
    #chart-parking-place {
        width: 100%;
        height: 200px;
        margin-top: 10px;
    }

    #chart-parking-dynamics {
        width: 100%;
        height: 270px;
    }

    #chart-parking-time {
        width: 100%;
        height: 390px;
    }

    /* 中图表 */
    #chart-revenue {
        width: 100%;
        height: 310px;
        margin-top: 15px;
    }

    /* 右图表 */
    #chart-appeal {
        width: 100%;
        height: 200px;
    }

    /* 营收图例 */
    .legend-revenue {
        width: 555px;
        height: 93px;
        margin-left: 12px;
        margin-top: 16px;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .legend-revenue .item-legend-revenue {
        display: flex;
        align-items: center;
        height: 45px;
        margin-left: 27px;
    }

    .legend-revenue .item-legend-revenue .span-round-rect {
        width: 12px;
        height: 12px;
        margin-right: 9px;
    }

    /*模态框的input*/
    .components-input-demo-size {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 10px;
    }

    .components-input-demo-size .ant-input {
        width: 200px;
    }

    .bottom-btn {
        position: absolute;
        bottom: 30px;
        width: 100%;
    }

    .btnBox {
        text-align: center
    }

    .btnBox button {
        width: 15%;
        margin-top: 10px
    }
</style>
